<template>
  <div class="chat-item-wrapper" tabindex="-1">
    <el-avatar :size="46" :src="avatarUrl" />
    <div class="chat-item-info">
      <div class="chat-item-name"><span>{{ name }}</span><span class="chat-last-date">{{ date }}</span></div>
      <div class="chat-item-last-msg">{{ msg }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatItem',
  props: {
    avatarUrl: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: 'test name'
    },
    date: {
      type: String,
      default: '22:36'
    },
    msg: {
      type: String,
      default: 'test message test message'
    }
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.chat-item-wrapper {
  display: flex;
  flex-direction: row;
  padding: 18px 12px;
  cursor: pointer;

  &:hover {
    background-color: var(--el-color-primary-light-9);
  }

  .chat-item-info {
    padding-left: 8px;

    .chat-item-name,
    .chat-item-last-msg {
      width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-item-name {
      display: flex;
      flex-direction: row;
      justify-content: space-between;


    }

    .chat-last-date {
      font-size: 10pt;
      color: var(--el-color-info);
    }

    .chat-item-last-msg {
      font-size: 12pt;
      color: var(--el-color-info);
    }
  }
}
</style>
